/* eslint-disable no-unused-vars */
import React, { useEffect, useImperativeHandle, useState, forwardRef, useContext } from 'react';
import { Form, Input, Button, Select, message } from 'antd';
import JsLiveCode from '../reactcode/JsLiveCode';
import DesignUtil from '../common/DesignUtil';
import ApiHelper from '../api';
import DesignContext from '../designContext';

const DataSourceScriptEdit = forwardRef((props, ref) => {
  const [script, setScript] = useState(props.script);
  const { useformData, getJsonValue } = useContext(DesignContext);
  const [hideCache, setHideCache] = useState(false);

  const refreash = () => {
    setScript({ ...script });
  };

  const test = () => {
    ApiHelper.testDataSource(
      useformData.formkey,
      {
        form_key: useformData.formkey,
        name: script.name,
        code: script.script,
        formData: JSON.stringify(script.loadOrder === 'page_preload' ? null : getJsonValue()),
      },
      (success) => {
        message.success(JSON.stringify(success.data), 3);
      },
      (fail) => {
        message.error(fail.message, 3);
      },
    );
  };

  useImperativeHandle(ref, () => ({
    setScript,
    script,
    test,
  }));

  const initCache = () => {
    if (script.loadOrder !== 'page_preload') {
      script.cachetime = 0;
      setHideCache(true);
    } else {
      script.cachetime = 60;
      setHideCache(false);
    }
  };

  useEffect(() => {
    script.key = script.key || `script${DesignUtil.UUID()}`;
    script.editTime = DesignUtil.formatDate(new Date());
    initCache();
  }, []);

  return (
    <>
      <Form layout="inline" labelAlign="right">
        <Form.Item label="数据源" style={{ width: '90%' }}>
          <Input
            placeholder="输入数据源名称"
            value={script.name}
            onChange={(event) => {
              script.name = event.target.value;
              refreash();
            }}
          />
        </Form.Item>
        <Form.Item label="加载" style={{ width: '45%' }}>
          <Select
            value={script.loadOrder}
            onChange={(event) => {
              script.loadOrder = event;
              initCache();
              refreash();
            }}
          >
            <Select.Option value="page_noneload">不加载</Select.Option>
            <Select.Option value="page_preload">页面加载前</Select.Option>
            <Select.Option value="page_loading">页面加载中</Select.Option>
            <Select.Option value="page_loaded">页面加载后</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="缓存" hidden={hideCache} style={{ width: '45%' }}>
          <Input
            placeholder="缓存时间(秒)"
            value={script.cachetime}
            onChange={(event) => {
              script.cachetime = event.target.value;
              refreash();
            }}
          />
        </Form.Item>
        <Form.Item label="描述" style={{ width: '95%' }}>
          <Input.TextArea
            placeholder="输入场景的描述内容"
            rows={2}
            value={script.description}
            onChange={(event) => {
              script.description = event.target.value;
              refreash();
            }}
          />
        </Form.Item>
        <Form.Item label="执行脚本" style={{ width: '100%' }}>
          <JsLiveCode
            id="datasource_script"
            onChange={(event) => {
              script.script = event;
              refreash();
            }}
            code={script.script}
          />
        </Form.Item>
        {/* <Form.Item style={{}}>
          <Button onClick={() => test()}>模拟获取数据</Button>
        </Form.Item> */}
      </Form>
    </>
  );
});

export default DataSourceScriptEdit;
